<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 想要获取到自定义事件的多个参数：在绑定自定义事件的处理函数时，只写名称，不写括号 -->
      <!-- 如果加了括号，通过$event只能获取到第一个参数 -->
      <!-- 总结：以后传参，如果想要传递多个数据，就用对象或数组 -->
      <hello :name="name" @change-name="onChangeName"></hello>
    </div>

    <script src="./js/vue.js"></script>
    <script>
      Vue.component('Hello', {
        // props 只读，不能修改
        props: {
          name: String,
        },
        // 死规定：不能通过 v-model 绑定 props 里面的数据
        // 单向数据流原则：https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
        template: `
          <div>
            Hello, <input :value="name" @blur="onInputBlur"> ~ <button @click="changeName">修改名称</button>
          </div>
        `,
        data() {
          return { newName: '' };
        },
        methods: {
          onInputBlur(e) {
            this.newName = e.target.value;
          },
          changeName() {
            console.log('来米了...', this.newName);
            // 怎么把数据传给爸爸？Vue给我们提供了API，通过触发自定义事件，把数据作为事件对象（或叫事件数据），传递给父组件
            // this.$emit：用来触发自定义事件
            //   第一个参数：自定义事件名称（死规定：不能用大写，如果有多个单词推荐使用短横线）
            //   第二个参数：事件对象（或叫事件数据）
            // this.$emit('change-name', [this.newName, 18, 'hehe', 'smd']);
            // 总结：以后传参，如果想要传递多个数据，就用对象或数组
            this.$emit('change-name', { newName: this.newName, age: 18, a: 'hehe', b: 'smd' });
            // 爸爸怎么接受？
          },
        },
        mounted() {
          this.newName = this.name;
        },
      });

      new Vue({
        el: '#app',
        data: {
          name: '张三',
        },
        methods: {
          onChangeName(e, a, b, c) {
            console.log('爸爸收到了:', e, a, b, c);
            this.name = e.newName;
          },
        },
      });
    </script>
  </body>
</html>
